<template>
  <div>
    <div class="box">
      <div class="smallbox">
        <div class="box1">
          <img src="./img/gefang.png" alt="" />
          <div class="gefang"></div>
          <p>歌房入驻</p>
          <router-link to="/gefang">
            <div class="yuan">查看详情</div>
          </router-link>
        </div>
        <div class="box1">
          <img src="./img/zhubo.png" alt="" />
          <div class="zhubo"></div>
          <p>主播入驻</p>
          <router-link to="/gefang">
            <div class="yuan">查看详情</div>
          </router-link>
        </div>
        <div class="box1">
          <img src="./img/gonghui.png" alt="" />
          <div class="gonghui"></div>
          <p>公会入驻</p>
          <router-link to="/gefang">
            <div class="yuan">查看详情</div>
          </router-link>
        </div>
        <div class="box1">
          <img src="./img/gefang.png" alt="" />
          <div class="faxing"></div>
          <p>发行作品入驻</p>
          <router-link to="/gefang">
            <div class="yuan">查看详情</div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box {
  width: 100%;
  height: 520px;
  background: url(./img/backgrond.png) no-repeat;
}

.smallbox {
  padding: 0 100px;
  padding-top: 80px;
  display: flex;
  justify-content: space-around;
}

.box1 {
  width: 300px;
  height: 360px;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.box1 img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transition: all ease-out 0.45s;
}

.box1 img:hover {
  transform: scale(1.05);
  transition: all ease-out 0.45s;
}

.box1 p {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.box1 p {
  font-size: 32px;
}

.yuan {
  position: absolute;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
  width: 195px;
  height: 56px;
  border: 1px solid #fff;
  border-radius: 40px;
  color: #fff;
  font-size: 22px;
  line-height: 56px;
}

.yuan:hover {
  background-color: rgba(255, 255, 255, 0.15);
  transition: all ease-out 0.75s;
}

.gefang {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: url(./img/shiliangtu.png);
  background-position: -594px -61px;
}

.zhubo {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: url(./img/shiliangtu.png);
  background-position: -510px -61px;
}

.gonghui {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: url(./img/shiliangtu.png);
  background-position: -510px -145px;
}

.zhubo {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: url(./img/shiliangtu.png);
  background-position: -510px -61px;
}

.faxing {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: url(./img/faxinimg.png) no-repeat;
  background-size: 100%;
}
</style>